<template>
<div class="tab-box">

<van-tabbar v-if="isShowTab" route active-color="#ee0a24" inactive-color="gray">
  <van-tabbar-item replace to="/" icon="home-o">发现</van-tabbar-item>
  <van-tabbar-item replace to="/hot" icon="fire-o">热歌榜</van-tabbar-item>
  <van-tabbar-item replace to="/search" icon="search">搜索</van-tabbar-item>
  <van-tabbar-item replace to="/my" icon="music-o">我的</van-tabbar-item>
</van-tabbar>
        <!-- 播放button组件 -->
    <router-view></router-view>
   </div>
</template>

<script>

import { mapState, mapMutations } from 'vuex'
export default {
  // props: {
  //   requiresAuth: Boolean
  // },

  data () {
    return {
      isShowTab: true
    }
  },
  created () {
    this.getTab()
  },
  computed: {
    ...mapState(['currentId'])
  },
  methods: {
    ...mapMutations(['getShowTab']),
    getTab () {
      this.getShowTab(this.isShowTab)
    }
  }
}
</script>

<style lang="less" scoped>
.tab-box{
  position: relative;

}

   /deep/ .van-tabbar-item{
        .van-icon{
        color: rgb(189, 188, 188);

        }

    }
   /deep/ .van-tabbar-item--active{

       position: relative;
        .van-icon{
            color: #ee0a24;
        }
         &::after{
             content:"";
             position: absolute;
             bottom: 0;
             left:50%;
             transform: translateX(-50%);
             height: 0px;
             width:50%;
             overflow: hidden;
             border-bottom:2px solid #dd001b;
        }

        .van-tabbar-item__icon{
          font-size: 20px;

        }
    }

</style>
